import React, {
  Component,
  useState,
  useEffect,
  createRef,
  useRef,
} from "react";

function Parment(props) {
  console.log(props, "props");
  let [num, setNum] = useState(0);
  let iptRef = createRef(null);
  let mapTem = [
    { name: "zs", age: 10 },
    { name: "ls", age: 15 },
    { name: "ww", age: 20 },
  ];
  useEffect(() => {
    console.log(iptRef, "iptRef");
  });
 let  hand = (e)=>{
  console.log(iptRef.current.value,'itRef');
    console.log(e.target.value);
  }
  return (
    <>
      <h1>函数组件</h1>
      <div>parment</div>
      <input onInput={hand} ref={iptRef} />
      <RefDom></RefDom>
      <button onClick={() => setNum(num + 1)}>修改值</button>
      <ul>
        {mapTem.map((item, index) => {
          return (
            <li key={index}>
              姓名：{item.name},年龄:{item.age}
            </li>
          );
        })}
      </ul>
    </>
  );
}
class RefDom extends Component {
  constructor() {
    super();
    this.myRef = React.createRef(null);
  }
  componentDidMount() {
    console.log(this.myRef.current); // 访问DOM节点
  }
  render() {
    return (
      <>
        <div>这是refDom</div>
        <h1 ref={this.myRef}>获取这个组件</h1>
      </>
    );
  }
}
export default Parment;
